<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>09 - 加载百度离线地图</title>
    <script src="../lib/ol6.15.1/ol.js"></script>
    <script src="../lib/bd09.js"></script>
    <link rel="stylesheet" href="../css/ol4/ol.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html, body {
            width: 100%;
            height: 100%;
        }

        #map {
            width: auto;
            height: 100%;
        }
    </style>
</head>
<body>
<div id="map"></div>
</body>
<script>
	const projectionBD09 = new ol.proj.Projection({
		code: 'BD:09',
		extent: [-20037726.37, -11708041.66, 20037726.37, 12474104.17],
		units: 'm',
		axisOrientation: 'neu',
		global: false,
	});
	ol.proj.addProjection(projectionBD09);
	ol.proj.addCoordinateTransforms('EPSG:4326', 'BD:09', coordinate => {
		console.log('添加坐标系转换 1',coordinate);
		return lngLatToMercator(coordinate);
	}, (coordinate => {
		console.log('添加坐标系转换 2',coordinate);
		return mercatorToLngLat(coordinate);
	}));
	console.log(ol.proj.get('BD:09'));

	const projectionExtentInBD09 = projectionBD09.getExtent();
	console.log(projectionExtentInBD09);
	const resolutions = [];
	const maxZoom = 18;
	const minZoom = 0;
	// 计算百度使用的分辨率
	for (let i = minZoom; i <= maxZoom; i++) {
		resolutions[i] = Math.pow(2, maxZoom - i);
	}
	console.log(resolutions);

	const tileGrid = new ol.tilegrid.TileGrid({
		origin: [0, 0],
		resolutions: resolutions,
		extent: projectionExtentInBD09,
	});

	const baiduSource = new ol.source.TileImage({
		projection: 'BD:09',
		tileGrid: tileGrid,
		tileUrlFunction: (tileCoord) => {
			let [z, x, y] = tileCoord;
			y = -y - 1;
			// 百度瓦片服务url将负数使用M前缀来标识
			// return `http://192.168.130.38:8080/baidumaps/roadmap/${z}/${x}/${y}.png`;
			return `http://121.36.242.84:10001/scgis/roadmap?level=${z}&col=${x}&row=${y}`;
			// return `http://192.168.109.101:9998/scgis/roadmap?level=${z}&col=${x}&row=${y}`;
			// return `https://192.168.108.48:9999/scgis/satellite?level=${z}&col=${x}&row=${y}`;
			// return `https://192.168.109.3:9999/scgis/satellite?level=${z}&col=${x}&row=${y}`;
			// return `https://192.168.106.109.3:9999/scgis/satelite?level=${z}&col=${x}&row=${y}`;
		},
		wrapX: false,
	});
	// 百度地图层
	const baiduMapLayer = new ol.layer.Tile({
		source: baiduSource,
	});

	let centerPoint = [116.384722, 39.889916]; // 邢台 - [114.507435,37.074612] ; 北京 - [116.384722, 39.889916]
	centerPoint = [120.151955,30.244904];  // 安吉县
	centerPoint = [117.182405,39.992960];  // 段甲岭站
	centerPoint = [116.403946,39.915087];  // 天安门
	centerPoint = [120.151973,30.244825];  // 三潭映月,百度坐标系
	// centerPoint = [120.140777102975,30.241056096803874];  // 三潭映月,wgs84坐标系


	const centerPointBD09 = ol.proj.transform(centerPoint, 'EPSG:4326', 'BD:09');

	console.log(centerPointBD09);

	const iconFeature = new ol.Feature({
		geometry: new ol.geom.Point(centerPointBD09)
	});

	const iconStyle = new ol.style.Style({
		image: new ol.style.Icon(
			/** @type {olx.style.IconOptions} */ ({
				anchor: [10, 26],
				anchorXUnits: 'pixels',
				anchorYUnits: 'pixels',
				src: '../image/position_orange.png'
			})
		)
	});

	iconFeature.setStyle(iconStyle);

	const vectorSource = new ol.source.Vector({
		features: [iconFeature]
	});

	const iconLayer = new ol.layer.Vector({
		source: vectorSource
	});

	const view = new ol.View({
		center: centerPointBD09,
		projection: 'BD:09',
		zoom: 11,
		maxZoom: 18,
		minZoom: 3,
		resolutions,
	});

	const map = new ol.Map({
		layers: [
			baiduMapLayer,
			iconLayer,
		],
		target: 'map',
		view,
	});

	// const newCenterPoint = ol.proj.transform([114.507435,37.074612], 'EPSG:4326', 'BD:09');
	// const newCenterPoint = ol.proj.transform([114.507435, 37.074612], 'EPSG:4326', 'BD:09');

	// view.setCenter(newCenterPoint);
	// view.setZoom(8);
</script>
</html>